<template>
  <div class="myset">
    自定义设置
    <el-table :data="tableData" border style="width: 70%;margin: 0 auto;">
      <!-- 表格数据渲染 -->
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
        width="150"
      >
        <template slot-scope="scope">
          <!-- <input v-if="titleList[item.id] == 'displaylist'" type="checkbox"/>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template> -->
          <input v-if="item.displaylist == 'checkbox'" type="checkbox"/>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "MySet",
  data() {
      return {
        tableData: [
          {
            fieldname: "客户名称",
            displayname: "客户名称",
            displaylist: "checkbox",
            isrequire: "-",
          },
          {
            fieldname: "联系人",
            displayname: "联系人",
            displaylist: "checkbox",
            isrequire: "-",
          },
          {
            fieldname: "关联",
            displayname: "关联",
            displaylist: "checkbox",
            isrequire: "-",
          },
        ],
        titleList: ["fieldname","displayname","displaylist","isrequire"],
        linklist: [
          {
            id: 0,
            name: "字段名称"
          },
          {
            id: 1,
            name: "显示名称"
          },
          {
            id: 2,
            name: "列表显示"
          },
          {
            id: 3,
            name: "是否必填"
          }
        ]
      }
    }
};
</script>

<style>
</style>